<template>
    <a-layout class="layout">
        <a-layout-sider>
            <div class="logo">
                <img src="../assets/logo.png" alt="">
                <div>上海正也医药有限公司</div>
            </div>
            <Menu></Menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header>
                <div class="header">
                    <template v-for="(item, idx) in headerList" :key="idx">
                        <div class="header-item">
                            <img src="../assets/img.png" alt="">
                            <div>{{ item.title }}</div>
                        </div>
                    </template>
                    <div class="header-item">
                        <img src="../assets/img.png" alt="">
                        <div>
                            <div>销讯通</div>
                            <div>行为管理系统</div>
                        </div>
                    </div>
                </div>
            </a-layout-header>
            <a-layout-content>
                <Breadcrumb></Breadcrumb>
                <router-view :key="$route.path"/>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script setup>
import Menu from './Menu'
import Breadcrumb from './Breadcrumb.vue'
import { reactive } from 'vue'
const headerList = reactive([{
    icon: '',
    title: '首页',
    path: ''
}, {
    icon: '',
    title: '主数据',
    path: ''
}, {
    icon: '',
    title: '辖区管理',
    path: ''
}])
</script>
  
<style lang="less">
.layout {
    height: 100vh;
}

.logo {
    height: 64px;
    color: #FFFFFF;
    text-align: left;
    padding-left: 24px;
    font-size: 12px;

    img {
        height: 28px;
        margin: 8px 0;
    }
}

.header {
    display: flex;
    color: #FFFFFF;
    height: 64px;
    line-height: normal;

    .header-item {
        width: 150px;
        display: flex;
        align-items: center;

        img {
            height: 40px;
            height: 40px;
            margin-right: 10px;
        }

    }
}
</style>
  